<template>
  <div v-if="router.currentRoute.value.name !== 'ads_edit'">
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="16">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="搜索项">
              <a-input v-model:value="listQuery.title" placeholder="输入标题搜索..." />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon><SyncOutlined /></template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'ads_add' }"
              type="primary"
              style="margin-left: 12px"
              @click="addNewData"
            >
              <template #icon><PlusOutlined /></template> 新增广告
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record.id"
      :dataSource="dataList.data"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #pic="{ text: record }">
        <a-image
          :width="200"
          :src="record"
          fallback=""
        />
      </template>
      <template #status="{ text: record }">
        <a-tag v-if="record == 1" color="blue">显示</a-tag>
        <a-tag v-if="record == -1" color="red">不显示</a-tag>
      </template>
      <template #action="{ text: record }">
        <a v-permission="{ action: 'ads_add' }" @click="ads_edit(record)"><EditOutlined /> 编辑</a>
        <a-divider v-permission="{ action: 'ads_ext' }" type="vertical" />
        <a-dropdown>
          <a v-permission="{ action: 'ads_ext' }" class="ant-dropdown-link">
            更多 <DownOutlined
          /></a>
          <template #overlay>
            <a-menu>
              <a-menu-item v-permission="{ action: 'ads_del' }" style="color: red">
                <a @click="ads_delete(record)"><DeleteOutlined /> 删除</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table>
  </div>
  <router-view v-else ref="content" />
</template>

<script lang="ts">
import { IconFont } from '@/components/iconfont'
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { Row, Col, Modal, Divider, Image } from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  DownOutlined
} from '@ant-design/icons-vue'
import { delAdsItem, getAdsList } from '@/api/ads'
import { useRouter } from 'vue-router'
import { requestFailed, requestSuccess } from '@/utils/feedback'

export default defineComponent({
  name: 'AdsList',
  components: {
    IconFont,
    SyncOutlined,
    PlusOutlined,
    DownOutlined,
    EditOutlined,
    DeleteOutlined,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Divider.name]: Divider
  },
  setup() {
    const formRef = ref()
    const router = useRouter()
    const state = reactive({
      loading: true,
      dataList: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        title: ''
      },
      pagination: {
        pageSizeOptions: ['10', '20', '30'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 10
      },
      columns: [
        {
          title: '标题',
          dataIndex: 'title'
        },
        {
          title: '分类',
          dataIndex: 'cate'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '广告图',
          dataIndex: 'pic',
          slots: { customRender: 'pic' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          slots: { customRender: 'status' }
        },
        {
          title: '添加时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ]
    })
    onMounted(() => {
      getDataList()
    })

    function handleTableChange(e) {
      state.loading = true
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      getDataList()
    }

    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      getDataList()
    }

    function searchSubmit() {
      state.loading = true
      getDataList()
    }

    function getDataList() {
      getAdsList(state.listQuery).then((res) => {
        state.loading = false
        state.dataList = res
        state.pagination.total = res.totalCount
      })
    }

    function ads_edit(itemData) {
      router.push({ name: 'ads_edit', query: { id: itemData.id } })
    }
    function addNewData() {
      router.push({ name: 'ads_edit', query: { id: '' } })
    }
    function ads_delete(data) {
      Modal.confirm({
        title: '确认永久删除本广告?',
        content: '【' + data.title + '】',
        okType: 'danger',
        onOk() {
          delAdsItem({ id: data.id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              reloadList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    return {
      ...toRefs(state),
      handleTableChange,
      reloadList,
      searchSubmit,
      ads_delete,
      formRef,
      addNewData,
      router,
      ads_edit,
      getDataList
    }
  }
})
</script>

<style scoped></style>
